# Compound Components Validation

<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/compound-components-validation" />

👨‍💼 Change <InlineFile file="app.tsx" /> to this (temporarily):

```tsx
import { ToggleButton } from './toggle'

export const App = () => <ToggleButton />
```

Why doesn't that work (it's not supposed to, but can you explain why)? Can you
figure out a way to give the developer a better error message that explains what
they're doing wrong and how to fix it?

🚨 The tests will tell you in the message for the error you must throw when the
context is undefined.

🦺 Additionally, this is where we can make TypeScript happier (TypeScript knew
about the problem we'd run into in this step of the exercise!). Remember,
TypeScript isn't making your life terrible. It's just showing you how terrible
your life already is 😂 In this exercise, we're going to make our lives better.

(You can go ahead and undo the change to <InlineFile file="app.tsx" /> if you'd
like. The tests will let you know that you've gotten it right).
